<template>
    <div id="app">
        <!-- hq -->
         <keep-alive v-if="isLoggedIn">
            <router-view v-if="$route.meta.isCached"></router-view>
        </keep-alive>
            <router-view v-if="!$route.meta.isCached||!isLoggedIn"></router-view>
        <!-- <router-view /> -->
    </div>
</template>
<script>
    import { on, off } from 'view-design/src/utils/dom';
    import { setMatchMedia } from 'view-design/src/utils/assist';
    import { mapMutations } from 'vuex';
    import Cookies from 'js-cookie';
    setMatchMedia();

    export default {
        name: 'app',
          data() {
            return {
            isLoggedIn: false,
            };
        },
        watch: {
            $route(to, from) {
                // if the route changes...
                let token = Cookies.get('website-token') || "";
                // console.log(token,'token')
                if (token) {
                    // firebase returns null if user logged out
                    this.isLoggedIn = true;

                } else {
                    this.isLoggedIn = false;
                }
                },
            },
        methods: {
            ...mapMutations('admin/layout', [
                'setDevice'
            ]),
            handleWindowResize () {
                this.handleMatchMedia();
            },
            handleMatchMedia () {
                const matchMedia = window.matchMedia;

                if (matchMedia('(max-width: 600px)').matches) {
                    this.setDevice('Mobile');
                } else if (matchMedia('(max-width: 992px)').matches) {
                    this.setDevice('Tablet');
                } else {
                    this.setDevice('Desktop');
                }
            }
        },
        mounted () {
            // console.log(process.env.NODE_ENV,'process.env.NODE_ENV_DIST')
            if (process.env.NODE_ENV_DIST == 'production') {
                let link = document.head.querySelector('link');
                link.href = './HongKong.ico';
            }
            on(window, 'resize', this.handleWindowResize);
            this.handleMatchMedia();
        },
        beforeDestroy () {
            off(window, 'resize', this.handleWindowResize);
        }
    }
</script>
